<template>
  <div class="favorite_list">
    <Row :gutter="16" type="flex">
      <Col :xs="24" :sm="24" :md="12" :lg="12" v-for="(item,index) in favoriteList" :key="index">
        <router-link :to="'/collection/'+item.favoriteId">
          <div class="list" v-lazy:background-image="item.favoriteImage">
            <div class="info_box">
              <div class="favorite_name">{{item.favoriteName}}</div>
              <div class="favorite_count">
                {{item.count}}
                <span>篇文章</span>
              </div>
            </div>
            <div class="warp_mask"></div>
          </div>
        </router-link>
      </Col>
    </Row>
    <NoMore v-if="isEnd" />
  </div>
</template>

<script>
import NoMore from "@/components/NoMore.vue";

export default {
  name: "UserCollection",
  components: {
    NoMore
  },
  data() {
    return {
      peopleid: this.$route.params.uid,
      favoriteList: [],
      isEnd: false,
      loading: false
    };
  },
  watch: {
    $route(val) {
      this.peopleid = val.params.uid;
    },
    peopleid(val) {
      this.$set(this, "favoriteList", []);
      this.getFavoriteListInfo(val);
    }
  },
  methods: {
    getFavoriteListInfo(id) {
      if (!this.loading) {
        this.loading = true;
        this.$axios
          .get("/getFavoriteListInfo", {
            params: {
              uid: id
            }
          })
          .then(res => {
            this.loading = false;
            if (res.data.code == "0") {
              this.favoriteList = res.data.data;
              if (res.data.data.length == 0) {
                this.isEnd = true;
              }
            } else {
              // 请求失败
              this.$Message.error({
                background: true,
                content: err.response.data.msg,
                duration: 2.5
              });
            }
          })
          .catch(err => {
            // 请求失败
            this.$Message.error({
              background: true,
              content: "请求失败",
              duration: 2.5
            });
          });
      } else {
        return;
      }
    }
  },
  mounted() {
    this.getFavoriteListInfo(this.peopleid);
  }
};
</script>

<style lang='scss'>
.favorite_list {
  padding: 1.5rem;
  .list {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: 0.5rem;
    // background-color: #dddddd;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    height: 10rem;
    .info_box {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 100%;
      height: 5rem;
      color: #fff;
      padding: 0 1rem;
      z-index: 10;
      .favorite_name {
        font-size: 1.2rem;
        line-height: 1.2;
        max-height: 1.5rem;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .favorite_count {
        letter-spacing: 1px;
      }
    }
  }
  .list:hover .warp_mask::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: rgba(0, 0, 0, 1);
    opacity: 0.3;
    // z-index: 1;
    width: 100%;
    height: 100%;
  }
}
</style>